<template>
    <view class="video-wrapper" :class="{ landscape: isLandscape }">
      <video
        ref="videoRef"
        class="video-element"
        :src="src"
        :autoplay="false"
        :loop="false"
        enable-play-gesture
        enable-fullscreen
        @fullscreenchange="handleFullscreenChange"
        webkit-playsinline
        playsinline
        x5-video-player-type="h5"
        x5-video-orientation="portrait"
      ></video>
    </view>
  </template>
  
  <script setup lang="ts">
  import { ref, defineProps, onMounted } from 'vue';
  
  // 接收外部传入的 src
  const props = defineProps<{
    src: string;
  }>();
  
  const videoRef = ref<HTMLVideoElement | null>(null);
  const isLandscape = ref(false);
  
  // 处理全屏切换事件
  const handleFullscreenChange = (e: any) => {
    const fullScreen = e.detail.fullScreen;
  
    if (!videoRef.value) return;
  
    if (fullScreen) {
      // 进入全屏：设置横屏样式
      videoRef.value.style.transform = 'rotate(90deg)';
      videoRef.value.style.width = '100vh';
      videoRef.value.style.height = '100vw';
      videoRef.value.style.left = '100%';
      videoRef.value.style.top = '0';
      videoRef.value.style.marginLeft = '0';
      videoRef.value.style.transformOrigin = '0 0';
    } else {
      // 退出全屏：恢复竖屏
      videoRef.value.style.transform = 'none';
      videoRef.value.style.width = '100%';
      videoRef.value.style.height = '600rpx';
      videoRef.value.style.left = '0';
      videoRef.value.style.top = '0';
      videoRef.value.style.marginLeft = '0';
    }
  
    isLandscape.value = fullScreen;
  };
  
  onMounted(() => {
    console.log('视频组件已挂载');
  });
  </script>
  
  <style lang="scss" scoped>
  .video-wrapper {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
  }
  
  .video-element {
    width: 100%;
    height: 600rpx;
    object-fit: contain;
    transform-origin: center center;
    transition: all 0.3s ease-in-out;
  }
  
  /* 横屏样式 */
  .video-wrapper.landscape {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .video-wrapper.landscape .video-element {
    width: 100vh !important;
    height: 100vw !important;
    transform: rotate(90deg) !important;
  }
  </style>